<!--
 * @Author: TomatoJade e0792344@u.nus.edu
 * @Date: 2022-10-27 09:23:27
 * @LastEditors: fisher
 * @LastEditTime: 2022-10-27 16:18:15
 * @FilePath: \jiang_learnjs\demo1\index2.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }


    .background{
        width: 100%;
        height:100%;
        /* background是元素背景色，color是字体颜色 */
        background:#487eb0;
        /* color: #487eb0; */
        z-index: 0;
    }

    .header{
        width: 100%;
        height: 75px;
        padding: 0;
        position: absolute;
        /* 设置完absolute后注意要设置top和left，无操作的情况下还是会随着文档里去排位置（这算个bug，但是没办法） */
        top: 0;
        z-index: 9;
    }
    .header>img{
        width: 100%;
        height: 100%;
    }

    #layer{
        width: 100%;
        height: 100%;
        z-index: 1;
        position: absolute;
    }
    #logo{
        width: 320px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9;
    }
    #datetime{
        color: #C1E8FD;
        position: absolute;
        top: 19px;
        left: 40px;
        font-size: 14px;
        z-index: 3;
    }

    .header_right{
        display: flex;
        align-items: center;
        color: #c1e8fd;
        position: absolute;
        right: 31px;
        top: 17%;
        z-index: 9;
        font-size: 12px;
    }

    .header_right_settingicon{
        width: 14px;
        height: 14px;
    }

    .header_right_setting{
        margin-left: 10px;
    }

    .header_right_usericon{
        width: 32px;
        height: 32px;
        margin-left: 20px;
    }
    
    .rightbar{
        display: flex;
        flex-direction: column;
        gap: 62px;
        position: absolute;
        right: 40px;
        top: 181px;
    }
    
    .rightbar img{
        width: 72px;
        height: 68px;
    }

    .leftbar{
        display: flex;
        flex-direction: column;
        align-items: center;
        /* relative仍然在文档流中，会被无定位属性的元素挤压 */
        /* position: relative; */
        position: absolute;
        top: 141px;
        width: 320px;
        height: 620px;
        background: rgba(0, 13, 24, 0.6);
        padding-top: 12px;
        padding-left: 26px;
        box-sizing: border-box;
    }

    .catalogue{
        width: 100%;
        color: #ffffff;
        font-size: 20px;
        margin-top: 20px;
    }

    .catalogue_title{
        display: flex;
        align-items: center;
        font-weight: bold;
        gap: 20px;
        font-family: Microsoft-YaHei;
    }
    .catalogue_title img{
        width: 22px;
        height: 22px;
    }

    .catalogue_content{
        margin-left: 85px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .catalogue_content>span{
        cursor: pointer;
    }
    .catalogue_content>span:hover{
        color: #00d5ff;
    }

    .bottom{
        width: 100%;
        height: 34px;
        bottom: 0px;
        position: absolute;
    }

</style>

<body>
    <div class="background"></div>
    <div class="header">
            <img id="logo" src="首页_slices\组 105@2x.png" alt="logo">
            <img id="layer" src="首页_slices\样式八@2x.png" alt="bg">
        
        <span id="datetime" onload="myDate()"></span>
        <div class="header_right">
            <img class="header_right_settingicon" src="首页_slices\205设置@2x.png" alt="">
            <span class="header_right_setting">设置</span>
            <img class="header_right_usericon" src="首页_slices\touxiang.png" alt="">
        </div>
    </div>

    <div class="leftbar">
        <div class="catalogue">
            <div class="catalogue_title">
            <img src="首页_slices\蒙版组 50@2x.png" alt="">
            <span>项目区位</span>
            </div>
            <div class="catalogue_content">
                <span>项目区位</span>
            </div>
        </div>

        <div class="catalogue">
            <div class="catalogue_title">
            <img src="首页_slices\蒙版组 62@2x.png" alt="">
            <span>现状概况</span>
            </div>
            <div class="catalogue_content">
                <span>南山水厂现状</span>
                <span>地块用地条件</span>
                <span>地下空间规划</span>
                <span>地面交通规划</span>
            </div>

        </div>

        <div class="catalogue">
            <div class="catalogue_title">
            <img src="首页_slices\蒙版组 64@2x.png" alt="">
            <span>上位规划</span>
            </div>
            <div class="catalogue_content">
                <span>总平面图布置</span>
                <span>分期实施方案</span>
                <span>地块用地条件</span>
            </div>

        </div>

        <div class="catalogue">
            <div class="catalogue_title">
            <img src="首页_slices\蒙版组 63@2x.png" alt="">
            <span>规划方案</span>
            </div>
            <div class="catalogue_content"><span></span></div>

        </div>
    </div>

    <div class="rightbar">
        <a href=""><img src="首页_slices\蒙版组 3@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 4@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 47@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 6@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 48@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 49@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 65@2x.png" alt=""></a>
    </div>

    <img class="bottom" src="首页_slices\底部@2x.png" alt="">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
<script>
    let timer = {}
    window.onload = () => {
        timer = setInterval(() => {
            document.getElementById("datetime").innerHTML = dayjs().format("YYYY/MM/DD HH:mm:ss")
        }, 1000);
    }
</script>
</html>